<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/20
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/product.css">
</head>
<script>
    $(function () {
        chaxunCuisine();
        chaxun(1, 10, 1);
        // console.log($("#Cuisine div[title=1]"));


    });
    var cookstyleid = 0;//菜系ID
    function chaxunCuisine() {
        $.ajax({
            url: '/backProductCuisineFindAll',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                fuzhiCuisine(data[0].object);
                //ajax是异步请求

            }
        })

    }

    function fuzhiCuisine(data) {

        let html = '';
        cookstyleid = data[0].id;
        $("div[title=" + cookstyleid + "]").css({"background-color": "#e69137", "color": "#f3f3f3"}).siblings().css({
            "background-color": "#f3f3f3",
            "color": "#e69137"
        });
        for (let i = 0; i < data.length; i++) {
            html += ' <div  title="' + data[i].id + '" onclick="userclick(this,' + data[i].id + ')">' + data[i].name + '</div>';
        }
        $("#Cuisine").html(html);
    }

    function userclick(e, id) {
        // $(e).siblings().addClass("clearback");
        cookstyleid = id;
        $(e).css({"background-color": "#e69137", "color": "#f3f3f3"}).siblings().css({
            "background-color": "#f3f3f3",
            "color": "#e69137"
        });
        page("aa");
    }

    //根据菜系id查询后台产品数据
    //id:菜系id，
    function chaxun(id, pageNum, pageSize) {
        console.log(id, pageNum, pageSize)
        $.ajax({
            url: "/CuisineFindById",//调用后台的地址
            data: {id: id, pageNum: pageNum, pageSize: pageSize},//传递给后台的数据
            type: "get",//调用后台方法的类型 get post
            dataType: "json", //返回给页面的数据类型 json
            success: function (data) {//当调用成功以后开始执行的方法，data表示后台传递给前端的数据
                console.log(data)

                $("#count").val(data[0].count);
                setHtml(data[0].object);
            }
        });
        // setHtml(num);
    }

    //拼接HTML
    function setHtml(data) {
        // if (data === undefined) {
        //     data = "";
        // } else {
        //     data = $(data).html();
        // }
        let html = '';
        for (let i = 0; i < data.length; i++) {
            html += '<div>\n' +
                '            <div class="p-img"><img src="' + data[i].imgHref + '" height="300" width="300"/></div>\n' +
                '            <h4>' + data[i].name + '</h4>\n' +
                '            <div class="p-price">价格：<span>' + data[i].price + '</span></div>\n' +
                '            <div class="p-info">\n' + data[i].content +
                '            </div>\n' +
                '        </div>';
        }
        // $(data)拿到当前对象
        //$(data).html()对当前对象进行取值
        //动态添加背景颜色
        $("#p-product").html(html);
    }

    function page(type) {
        let num = $("#pageNum").val();
        num = num == "" ? 8 : parseInt(num);
        let size = $("#pageSize").val();
        size = size == "" ? 1 : parseInt(size);
        let count = $("#count").val();//总条数
        let endPage = count % num === 0 ? count / num : Math.ceil(count / num);
        switch (type) {
            case '0':
                size = 1;
                break;
            case '-':
                size = size == 1 ? 1 : --size;
                break;
            case '+':
                size = size == endPage ? endPage : ++size;
                break;
            case '1':
                //需要查询总条数
                size = endPage;
                break;
            case 'tz':
                //需要查询总条数
                size = $("#tiaozhuanSize").val() == "" ? 1 : parseInt($("#tiaozhuanSize").val());
                break;
        }
        chaxun(cookstyleid, num, size);
        $("#pageNum").val(num);
        $("#pageSize").val(size);
        $("#tiaozhuanSize").val(size);
        <%--select * from product where cookstyleid =1 limit 3,5--%>
    }
</script>
<body>
<jsp:include page="top.jsp"></jsp:include>
<div class="p-content">

    <div class="banner-title">
        <div class="float-left">产品展示</div>
        <div class="title-plate float-right" id="Cuisine">
            <%--            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">川菜</div>--%>
            <%--            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">粤菜</div>--%>
            <%--            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">湘菜</div>--%>
            <%--            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">鄂菜</div>--%>
            <%--            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">闽菜</div>--%>
            <%--            <div onmouseover="chaxun(this)" onmouseout="clearback(this)">鲁菜</div>--%>
        </div>
    </div>
    <!--    显示所有产品-->
    <div id="p-product" class="p-product">
        <%--        <c:forEach items="${productList}" var="product">--%>
        <%--            <div>--%>
        <%--                <div class="p-img"><img src="../img/9_8hh4.jpg" height="300" width="300"/></div>--%>
        <%--                <h4>${product.name}</h4>--%>

        <%--                <div class="p-price">价格：<span>${product.price}</span></div>--%>
        <%--                <div class="p-info">${product.content}</div>--%>
        <%--            </div>--%>
        <%--        </c:forEach>--%>

    </div>

    <!--    分页-->
    <div class="news-page">
        每一页<input type="text" id="pageNum" value="8" style="width: 20px;">条
        当前第<input type="text" id="pageSize" value="1" style="width: 20px;">页
        总共 <input type="text" id="count" readonly style="width: 20px;">条
        <div onclick="page('0')">首页</div>
        <div onclick="page('-')">上一页</div>
        <div onclick="page('+')">下一页</div>
        <div onclick="page('1')">尾页</div>
        <a href="javascript:page('tz')">直接跳转到</a><input type="text" id="tiaozhuanSize" value="1" style="width: 20px;">页
        <%--        每一页10条数据 pageNum，显示第七页 pageSize    --%>
        <%--        select * from product where cookstyleid=1 limit pageNum*(pageSize-1),pageNum--%>
    </div>
</div>
</div>
<jsp:include page="foot.jsp"></jsp:include>
<script>

</script>
</body>

</html>